<template>
	<view class="modex-mine">
		<view class="top-background">

		</view>
		
		<view class="back-arrow" :style="{'top': paddingTop}">
			<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#287b94">
			</uni-icons>
			<uni-icons style="margin-right: 40rpx;" type="search" size="30" color="#287b94"></uni-icons>
		</view>

		<view class="rising-text">
			<view class="text">你的每一次灵感悦动，都在把这个世界推向美好</view>
		</view>

		<view class="wind-deep">
			<view class="wind-deep-content">

				<view style="position: absolute;top: -40rpx;left: 10rpx;">
					<uni-icons style="margin-right: 40rpx;" type="vip" size="55" color="#287b94"></uni-icons>
				</view>

				<view class="user-info">
					<view class="nickname">带着脑子去流浪</view>
					<view class="level">lv{{userData.hulaLevel}}</view>
				</view>
				<view class="user-status">
					<view class="out">
						<view class="inner" :style="{'width': (userData.hulaScore/userData.nextHulaScore)*100 + '%'}"></view>
					</view>
					<view style="width: 100%;display: flex;flex-direction: row;justify-content: space-between;">
						<view class="status-text">{{userData.lastHulaScore}}</view>
						<view class="status-text">目标 {{userData.hulaScore}}/{{userData.nextHulaScore}}</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="content-back">
			
			
			<view class="content-buttons">
				<view class="content-button" @click="toManage('space-list')">
					<view class="icon">
						<image src="https://www.cdn.kxcdedu.top/image/default/ABE3FD4B5C22411DAC59F66579D6DF51-6-2.png"></image>
					</view>
					<view class="text">浪者空间</view>
				</view>
				<view class="content-button" @click="toManage('question-list')">
					<view class="icon">
						<image src="https://www.cdn.kxcdedu.top/image/default/7E9D3042C5404679A21A979F615CB9FB-6-2.png"></image>
					</view>
					<view class="text">问题管理</view>
				</view>
				<view class="content-button" @click="toManage('team-list')">
					<view class="icon">
						<image src="https://www.cdn.kxcdedu.top/image/default/2FD75BD91F22480198DACE574F8B0276-6-2.png"></image>
					</view>
					<view class="text">团队管理</view>
				</view>
				<view class="content-button" @click="toManage('wind-list')">
					<view class="icon">
						<image src="https://www.cdn.kxcdedu.top/image/default/E9E6477A133C455782E49063E9DB0BA0-6-2.png"></image>
					</view>
					<view class="text">创作管理</view>
				</view>
			</view>
		


			<view class="wind-list">

				<view class="card wind" v-if="winds.length == 0">
					<view class="tabs">
						<view v-for="(item,index) in windTypes">
							<view @click="changeTab(index)" class="tab" :class="index == currentTypeIndex ? 'tab-current': '' ">
								<view>{{windTypes[index]}}</view>
								<view v-if="index == currentTypeIndex" class="tab-line"></view>
							</view>
						</view>
					</view>
					<view>暂无内容</view>
				</view>

				<view class="card wind" v-for="(item, index) in winds" :key="index">
					<view v-if="index == 0" class="tabs">
						<view v-for="(item,index) in windTypes">
							<view @click="changeTab(index)" class="tab" :class="index == currentTypeIndex ? 'tab-current': '' ">
								<view>{{windTypes[index]}}</view>
								<view v-if="index == currentTypeIndex" class="tab-line"></view>
							</view>
						</view>
					</view>

					<view class="wind-date">{{item.gmtCreate}} {{ windType[item.type] }}</view>

					<view v-if="item.type <= 2">
						<view class="wind-content" v-html="item.postInfoVO.content"></view>
						<view class="wind-pictures" v-if="item.postInfoVO.pictures && item.postInfoVO.pictures.length > 0">
							<view v-for="picture in item.postInfoVO.pictures" class="picture"
								@tap="ViewImage(index,picture)">
								<image mode="aspectFill" :src="picture" />
							</view>
						</view>
					</view>

					<view v-if="item.type <= 5 && item.type >= 4">
						<view class="wind-content" v-html="item.commentListVO.content"></view>
						<view class="wind-pictures"
							v-if="item.commentListVO.pictures && item.commentListVO.pictures.length > 0">
							<view v-for="picture in item.commentListVO.pictures" class="picture"
								@tap="ViewImage(index,picture)">
								<image mode="aspectFill" :src="picture" />
							</view>
						</view>
					</view>

					<view v-if="item.type == 6">
						<view class="wind-content" v-html="item.talkListVO.content"></view>
					</view>



				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/common/service/service.js';
	const app = getApp();
	export default {
		data() {
			return {
				touchNum: 0,
				pageNow: 1,

				showTipAdd: 0,
				showTipEdit: 0,
				tipEditId: '',

				winds: [],
				windTypes: ["全部", "记忆", "帖子", "文章", "评论", "箴言"],
				currentTypeIndex: 0,
				windType: ['', '刻入一个记忆', '发表一个帖子', '发表一篇文章', '输出一个评论', '输出一个回复', '刻入一条箴言'],

				mindDeeps: [],
				mindDeepColor: ['#a7cfce', '#5DACB1', '#1f657a', '#164756'],

				tipContent: '',


				userData:{},
				windSpacesList: [],
				
				paddingTop:null
			};
		},
		onLoad() {
			var that = this;
			that.listMyWind();
			this.getUserData();
			
			
			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		onReachBottom() {
			this.pageNow++
			this.$api.listMyWind({
				pageSize: 20,
				pageNow: this.pageNow,
				type: this.currentTypeIndex
			}).then(res => {
				if (res.data.rows.length > 0) {
					this.minds = [...this.minds, ...res.data.rows]
				}
			})
		},
		methods: {
			getUserData() {
				this.$api.getUserData().then(res => {
					this.userData = res.data;
				})
			},
			listMyWind() {
				this.$api.listMyWind({
					pageSize: 20,
					pageNow: 1,
					type: this.currentTypeIndex
				}).then(res => {
					this.winds = res.data.rows

				})
			},

			listWindSpace() {
				this.$api.listWindSpace().then(res => {
					this.windSpacesList = res.data
				})
			},

			listRecentWindDeep() {
				this.$api.listRecentWindDeep().then(res => {
					this.mindDeeps = res.data
					this.mindDeeps[6] = 3
					this.mindDeeps[5] = 2
					this.mindDeeps[4] = 1
				})
			},


			ViewImage(index, url) {
				uni.previewImage({
					urls: this.winds[index].type == 4 ? this.winds[index].commentListVO.pictures : this.winds[
						index].postInfoVO.pictures,
					current: url
				});
			},

			gotoSpaceManage(id, type) {
				if (type === 3) {
					uni.navigateTo({
						url: '/pages_self/wind/manage/course-manage?courseId=' + id
					});
				} else if (type === 4) {
					uni.navigateTo({
						url: '/pages_self/wind/manage/question-manage?questionId=' + id
					});
				} else {
					uni.navigateTo({
						url: '/pages_self/wind/manage/island-manage?islandId=' + id
					});
				}

			},

			changeTab(index) {
				this.currentTypeIndex = index
				this.listMyWind()
			},

			openAddModal() {
				this.showTipAdd = 1
			},
			
			toManage(url){
				uni.navigateTo({
					url: '/pages_self/wind/manage/' + url
				});
			},

			toBackPage() {
				uni.navigateBack()
			},

			getSimpleText(html) {
				var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
				var msg = html.replace(re1, ''); //执行替换成空字符
				return msg;
			},
		},
		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			},
			getSimpleText(html) {
				var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
				var msg = html.replace(re1, ''); //执行替换成空字符
				return msg;
			}
		}
	};
</script>
<style scoped lang="scss">
	.modex-mine {

		background-color: #F9F9F9;


		.top-background {
			position: fixed;
			z-index: 2;
			width: 100%;
			height: 450rpx;
			border-radius: 0 0 50rpx 50rpx;
			background-image: url(https://www.cdn.kxcdedu.top/image/default/7C4BD29FBC644AA5BB5A2C86FD789335-6-2.png);
			background-repeat: no-repeat;
			background-size: cover;
		}

		.back-arrow {
			width: 100%;
			//#ifdef MP-WEIXIN
			width: 550rpx;
			//#endif
			
			top: 100rpx;
			
			// #ifdef H5
			top: 40rpx;
			// #endif
			
			height: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			position: fixed;
			z-index: 2;
		}

		.rising-text {
			position: fixed;
			z-index: 3;
			top: 230rpx;
			
			// #ifdef H5
			top: 170rpx;
			// #endif
			
			width: 600rpx;
			margin-left: 75rpx;

			font-size: 36rpx;
			font-weight: bold;

			height: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			
			.text{
				letter-spacing: 5rpx;
				background: linear-gradient(90deg, rgba(55, 143, 153, 1) 0%, rgba(171, 111, 94, 0.43) 51.31%, rgba(102, 173, 239, 1) 100%);
				-webkit-background-clip: text;
				color: transparent;
			}
		}

		.wind-deep {
			position: sticky;
			top: 360rpx;
			
			// #ifdef H5
			top: 300rpx;
			// #endif
			
			width: 750rpx;
			z-index: 3;


			.wind-deep-content {
				position: relative;
				background-color: #ffffff;
				height: 160rpx;
				padding: 30rpx;
				width: 610rpx;
				border-radius: 10rpx;
				margin-left: 40rpx;

				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.user-info {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 100rpx;

					.nickname {
						font-size: 36rpx;
						letter-spacing: 5rpx;
						color: #206075;
						font-weight: bold;
					}

					.level {
						font-weight: bold;
						margin-left: 40rpx;
						padding: 10rpx 20rpx;
						letter-spacing: 5rpx;
						border-radius: 30rpx;
						background-color: #b1e2e2;
						color: #206075;
					}

				}

				.user-status {
					display: flex;
					flex-direction: column;

					.out {
						width: 610rpx;
						margin-right: 20rpx;
						height: 15rpx;
						border-radius: 10rpx;
						background-color: #ececec;

						.inner {
							height: 15rpx;
							border-radius: 10rpx;
							background-color: #5DACB1;
						}

					}

					.status-text {
						font-size: 28rpx;
						margin-top: 20rpx;
						color: gray;
					}

				}

			}

		}

		.content-back {
			width: 100%;
			position: relative;
			z-index: 1;
			padding-top: 380rpx;
			
			// #ifdef H5
			padding-top: 320rpx;
			// #endif
			
			padding-bottom: 40rpx;

			.content-buttons {
				width: 670rpx;
				margin-left: 40rpx;
			
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 10rpx;
			
				.content-button {
					width: 150rpx;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 20rpx;
					
					background-color: rgba(255, 255, 255, 0.8);
			
					.icon {
						width: 70rpx;
						height: 70rpx;
						border-radius: 20rpx;
						overflow: hidden;
					}
					
					.text {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #595959;
					}
				}
			}
			
			.wind-spaces-empty{
				width: 670rpx;
				margin: 20rpx 0;
				margin-left: 40rpx;
				height: 250rpx;
				border-radius: 20rpx;
				background-image: url(https://www.cdn.kxcdedu.top/image/default/7C4BD29FBC644AA5BB5A2C86FD789335-6-2.png);
				background-repeat: no-repeat;
				background-size: cover;
				
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.text{
					letter-spacing: 5rpx;
					background: linear-gradient(90deg, rgba(55, 143, 153, 1) 0%, rgba(171, 111, 94, 0.43) 51.31%, rgba(102, 173, 239, 1) 100%);
					-webkit-background-clip: text;
					color: transparent;
					font-weight: bold;
				}
				
				
			}


			.tabs {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 20rpx;
				border-bottom: solid thin #d3d3d3;

				.tab {
					margin-right: 20rpx;
					color: gray;
					height: 60rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
				}

				.tab-current {
					color: #2c2c2c;
					font-weight: bold;
				}

				.tab-line {
					width: 40rpx;
					height: 7rpx;
					border-radius: 5rpx;
					background-color: #2c2c2c;
				}


			}


			.wind-list {
				margin-top: 30rpx;


				.wind {
					display: flex;
					flex-direction: column;
					width: 610rpx;
					padding: 30rpx;
					margin-bottom: 30rpx;

					.wind-date {
						color: gray;
						font-size: 28rpx;
					}

					.wind-content {
						margin-top: 10rpx;
						
						// /deep/p {
						// 	margin: 20rpx 0;
						// }
						
						
						/deep/img {
							width: 100%;
						}
					}

					.wind-pictures {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin-top: 20rpx;

						width: 610rpx;
						flex-wrap: wrap;

						.picture {
							width: 195rpx;
							height: 195rpx;
							border-radius: 10rpx;
							overflow: hidden;
						}
					}

				}
			}
		}





		.userinfo-avatar {
			display: flex;
			overflow: hidden;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-left: 30rpx;
		}



	}


	.card {
		width: 670rpx;
		margin-left: 40rpx;
		background-color: white;
		border-radius: 10rpx;
	}



	.question-title {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
		font-size: 110%;
		font-weight: bold;
		color: #000222;
	}

	.question-point {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
		color: rgb(43, 42, 42);
		margin-bottom: 10rpx;
	}

	.question-answer {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		color: rgb(43, 42, 42);

		/*超过范围进行隐藏不显示*/
		overflow: hidden;
		/*文本溢出, 使用省略号 */
		text-overflow: ellipsis;
		/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
		display: -webkit-box;
		/*限制块容器显示的文本行数, 按照你的需求设置*/
		-webkit-line-clamp: 3;
		/*盒子的方向, 垂直、水平等*/
		-webkit-box-orient: vertical;
		/*文字换行, 可以在单词内断*/
		word-wrap: break-word;
	}

	.myButton {
		color: white;
		font-family: KAITI;
		border-radius: 20rpx;
		background-color: #1244de;
		padding: 0;
		padding-top: 8rpx;
		box-shadow: 1px 1px 8px 2px #c8cec8;
	}

	.rowItem {
		display: inline-block;
	}

	.scroll-x {
		white-space: nowrap;
		display: flex;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
